<template>
  <div class="container">
    <!-- 头部 -->
    <nav-header></nav-header>
    <!-- 面包屑 -->
    <nav-bread>
      <span>Goods</span>
    </nav-bread>
    <div class="accessory-result-page accessory-page">
      <div class="container">
        <div class="filter-nav">
          <span class="sortby">Sort by:</span>
          <a href="javascript:void(0)" class="default cur">Default</a>
          <a href="javascript:void(0)" class="price" @click="sortPrice">Price  <img src="./../assets/short.jpg" alt="" class="icon icon-arrow-short" v-bind:class="{'sort-up':!sortFlag}"></a>
          <a href="javascript:void(0)" class="filterby stopPop" @click="showFilterTop">Filter by</a>
        </div>
        <div class="accessory-result">
          <!-- filter -->
          <div class="filter stopPop" id="filter" v-bind:class="{'filterby-show':filterBy}">
            <dl class="filter-price">
              <dt>Price:</dt>
              <dd><a href="javascript:void(0)" v-bind:class="{'cur':priceChecked=='all'}" @click="setPriceFilter('all')">All</a></dd>
              <dd v-for="(price,index) in priceData">
                <a href="javascript:void(0)" v-bind:class="{'cur':priceChecked==index}" @click="setPriceFilter(index)">{{price.startPrice}} - {{price.endPrice}}</a>
              </dd>
            </dl>
          </div>

          <!-- search result accessories list -->
          <div class="accessory-list-wrap">
            <div class="accessory-list col-4">
              <ul>
                <li v-for="(goods,index) in goodsList">
                  <div class="pic">
                    <a href="#"><img v-lazy="'static/'+goods.productImage" :key="'static/'+goods.productImage"></a>
                  </div>
                  <div class="main">
                    <div class="name">{{goods.productName}}</div>
                    <div class="price">{{goods.salePrice}}元</div>
                    <div class="btn-area" @click="addCart(goods.productId)">
                      <a href="javascript:;" class="btn btn--m">加入购物车</a>
                    </div>
                  </div>
                </li>
              </ul>
              <div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="30" class="load_more">
                <img src="./../assets/loading-spinning-bubbles.svg" alt="加载中..." v-show="loading">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <model v-bind:mdShow="mdShow" v-on:close="closeModal">
      <p slot="message">
        请先登录，否则无法加入到购物车！
      </p>
      <div slot="btnGroup">
        <a class="btn btn--m"  @click="mdShow = false">关闭</a>
      </div>
    </model>


    <model v-bind:mdShow="mdShowCart" v-on:close="closeModal">
      <p slot="message">
        <!-- <svg class="icon-status-ok">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-status-ok"></use>
        </svg> -->
        <svg class="icon-status-ok" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
        <g><path d="M990,271.1c0-15.8-6.3-31.6-17.7-43l-86-86c-11.4-11.4-27.2-17.7-43-17.7c-15.8,0-31.6,6.3-43,17.7L385.6,557.5L199.7,371c-11.4-11.4-27.2-17.7-43-17.7c-15.8,0-31.6,6.3-43,17.7l-86,86C16.3,468.4,10,484.2,10,500c0,15.8,6.3,31.6,17.7,43l228.9,228.9l86,86c11.4,11.4,27.2,17.7,43,17.7c15.8,0,31.6-6.3,43-17.7l86-86l457.8-457.7C983.7,302.7,990,286.9,990,271.1z"/></g>
        </svg>
        <span>加入购物车成功！</span>
      </p>
      <div slot="btnGroup">
        <a class="btn btn--m"  @click="mdShowCart = false">继续购物</a>
        <router-link class="btn btn--m" to="/cart">查看购物车</router-link>
      </div>
    </model>
    <div class="md-overlay" v-show="overLayFlag" @click="close"></div>
    <!-- 底部 -->
    <nav-footer></nav-footer>
  </div>
</template>

<script>
import "../assets/css/base.css";
import "../assets/css/product.css";
import "../assets/css/login.css";
import "../assets/css/checkout.css";
import navHeader from "@/components/Header";
import navFooter from "@/components/Footer";
import navBread from "@/components/Bread";
import model from "@/components/Model";
import axios from "axios";

export default {
  data() {
    return {
      goodsList: [],
      priceChecked: "all", //默认当前全选中
      filterBy: false,
      overLayFlag: false,
      loginMd: false,
      page: 1,
      pageSize: 8,
      sortPage: true,
      busy: true,
      loading: true,
      sortFlag: false,
      mdShow: false,
      mdShowCart: false,
      priceData: [
        {
          startPrice: 0,
          endPrice: 100
        },
        {
          startPrice: 100,
          endPrice: 1000
        },
        {
          startPrice: 1000,
          endPrice: 2000
        },
        {
          startPrice: 2000,
          endPrice: 5000
        }
      ]
    };
  },
  components: {
    navHeader,
    navFooter,
    navBread,
    model
  },
  mounted() {
    this.getGoods();
  },
  methods: {
    getGoods(flag) {
      var param = {
        page: this.page,
        pageSize: this.pageSize,
        sort: this.sortPage ? 1 : -1,
        priceLevel: this.priceChecked
      };
      this.loading = true;
      axios
        .get("/goods/list", {
          params: param
        })
        .then(response => {
          this.loading = false;
          let res = response.data;
          if (res.status == "0") {
            if (flag) {
              this.goodsList = this.goodsList.concat(res.result.list);
              console.log(res.result);
              if (res.result.count == 0) {
                this.busy = true;
              } else {
                this.busy = false;
              }
            } else {
              this.goodsList = res.result.list;
              this.busy = false;
            }
          } else {
            this.goodsList = [];
            this.busy = false;
          }
        });
    },
    sortPrice() {
      this.sortPage = !this.sortPage;
      this.page = 1;
      this.getGoods();
      this.sortFlag = !this.sortFlag;
    },
    loadMore: function() {
      this.busy = true;
      setTimeout(() => {
        this.page++;
        this.getGoods(true);
      }, 500);
    },
    addCart(productId) {
      axios
        .post("/goods/addCart", {
          productId: productId
        })
        .then(res => {
          // console.log(res.data.msg);
          if (res.data.status == "0") {
            // alert(res.data.result);
            this.mdShowCart = true;
          } else {
            // alert(res.data.msg);
            this.mdShow = true;
          }
        });
    },

    showFilterTop() {
      this.filterBy = true;
      this.overLayFlag = true;
    },
    setPriceFilter(index) {
      this.priceChecked = index;
      this.page = 1;
      this.getGoods();
      this.close();
    },
    close() {
      this.filterBy = false;
      this.overLayFlag = false;
    },
    closeModal() {
      this.mdShow = false;
      this.mdShowCart = false;
      // this.close();
    }
  }
};
</script>

<style scoped>
.load_more {
  height: 100px;
  line-height: 100px;
  text-align: center;
  font-size: 20px;
}
.sort-up {
  transform: rotate(180deg);
  transition: all 0.3s;
}
</style>

